<template>
  <!-- 移除v-if="hasPermission"条件判断，让所有用户都能访问 -->
  <div class="table-container">
    <el-form :model="queryParams" ref="searchForm" :inline="true" label-width="78px" style="margin-top: 30px;">
      <el-form-item label="账期" prop="accountPeriod">
        <el-input v-model="queryParams.accountPeriod" placeholder="请输入账期(xxxx-xx)," clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="部门" prop="department">
        <el-input v-model="queryParams.department" placeholder="请输入部门名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发布状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable @keyup.enter.native="handleQuery">
          <el-option label="已发布" value="0"></el-option>
          <el-option label="未发布" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 20px;">
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="button-group">
      <el-row>
        <el-button type="danger" icon="el-icon-close" @click="handleBatchDelete" :disabled="selectedRowKeys.length === 0">批量删除</el-button>
        <el-button type="success" icon="el-icon-upload2" @click="handleBatchImport">批量导入</el-button>
      </el-row>
    </div>
    <div>
      <input type="file" ref="fileInput" style="display: none" @change="handleFileChange" />
    </div>

    <el-table @selection-change="handleSelectionChange" @row-click="handleRowClick" ref="multipleTable" row-key="id" :data="uploadLogList" border style="width: 100%;" header-align="center">
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column type="index" label="序号" width="120" align="center"></el-table-column>
      <el-table-column prop="accountPeriod" label="账期" align="center"></el-table-column>
      <el-table-column prop="department" label="部门" align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" align="center"></el-table-column>
      <el-table-column prop="status" label="发布状态" align="center">
        <template slot-scope="scope">
          <div :class="getStatusClass(scope.row)">
            {{ formatStatus(scope.row) }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background style="margin-top: 20px; text-align: center;" :current-page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" :pager-count="7" :page-sizes="[15, 30, 50,100]"
      @size-change="getPageList" @current-change="getPageList" prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper,->,sizes,total">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  name: "UploadLogTable",
  // 移除hasPermission计算属性
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        accountPeriod: null,
        department: null,
        status: null,
      },
      total: 0,
      uploadLogList: [],
      selectedRowKeys: [],
    };
  },
  mounted() {
    this.getPageList();
  },
  methods: {
    /** 查询分页列表 */
    getPageList() {
      this.$API.salary.listsalaryInfo(this.queryParams)
        .then((response) => {
          this.uploadLogList = response.data.list;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.error("请求失败：", error);
        });
    },
     /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getPageList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.accountPeriod = "";
      this.queryParams.department = "";
      this.queryParams.status = "";
      this.handleQuery();
    },
    /****  【3】格式化转换状态 ****/
    formatStatus(row) {
      switch (row.status) {
        case 0:
          return "已发布";
        case 1:
          return "未发布";
        default:
          return "未知状态";
      }
    },
    getStatusClass(row) {
      switch (row.status) {
        case 0:
          return "status-published";
        case 1:
          return "status-unpublished";
        default:
          return "status-unknown";
      }
    },
    /****【9】执行批量删除操作 ****/
    // 【9.1】点击复选框触发，复选框样式的改变
    handleSelectionChange(val) {
      this.selectedRowKeys = val;
    },
    // 【9.2】点击行触发，选中或不选中复选框
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    // 【9.3】点击批量删除
    async handleBatchDelete() {
      const { selectedRowKeys: selectedRows } = this;
      try {
        await this.$confirm(`请确定要删除选中的数据吗？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        // 构建删除操作的数组
        const results = await Promise.allSettled(
          selectedRows.map((row) => this.$API.salary.deleteInfo(row.id))
        );

        // 检查是否有成功删除的数据
        if (results.some((result) => result.status === "fulfilled")) {
          // 更新表格数据
          this.getPageList(
            this.uploadLogList.length > 1 ? this.page : this.page - 1
          );
          // 清空选中的行数据
          this.selectedRowKeys = [];
          this.$message.success("选中的数据批量删除成功");
        } else {
          this.$message.warning("没有成功删除的数据");
        }
      } catch (error) {
        console.error(error);
        this.$message.error("批量删除失败");
      }
    },
    handleBatchImport() {
      this.$refs.fileInput.click();
    },
    async handleFileChange(event) {
      try {
        const files = event.target.files;
        if (files.length > 0) {
          const formData = new FormData();
          formData.append("file", files[0]);
          await this.uploadFile(formData);
          this.$message.success("文件上传成功");
          this.getPageList();
        } else {
          throw new Error("请选择要上传的文件");
        }
      } catch (error) {
        console.error("文件上传失败", error);
        this.$message.error("文件上传失败：" + error.message);
      } finally {
        const pageLastNum = Math.ceil(this.total / this.queryParams.pageSize);
        this.queryParams.pageNum = pageLastNum;
        event.target.value = "";
      }
    },
    async uploadFile(formData) {
      try {
        const response = await this.$API.salary.uploadsalarys(formData);
        console.log("文件上传成功", response);
      } catch (error) {
        throw new Error("文件上传失败：" + error.message);
      }
    },
  },
};
</script>

<style>
.table-container {
  width: 98%;
}

.Search {
  width: 20%;
}

.table-container .el-table {
  border-radius: 8px; /* 圆角 */
  overflow: hidden; /* 隐藏边角 */
  /* margin: 0 10px; */
}

.table-container .el-table th {
  background-color: #355777; /* 表头背景色 */
  color: #ffffff; /* 表头文字色 */
  border-bottom-width: 0;
  font-size: 20px;
}

.table-container .el-table tbody tr {
  font-size: 18px; /* 所有行统一字体大小 */
  font-weight: 500;
}

.table-container .el-table tbody tr:nth-child(odd) {
  background: #ffffff; /* 奇数行背景色 */
}

.table-container .el-table tbody tr:nth-child(even) {
  background-color: #ebf5f8; /* 偶数行背景色 */
}

/* 去掉原来鼠标悬浮效果 */
.el-table tbody tr:hover > td {
  background-color: transparent !important;
}

.table-container .el-table tbody tr:hover {
  background-color: #a5dcec !important; /* 悬停时的背景色 */
}

.button-group {
  margin: 20px 0; /* 合并上下间距 */
  text-align: right;
}

.blue-button {
  background-color: #f38b03;
  color: aliceblue;
}

.dialog-footer {
  text-align: right;
}

/* 修改状态颜色样式 */
.status-published {
  color: #4caf50 !important;
  font-weight: 600;
} /* 已发布 - 绿色 */
.status-unpublished {
  font-weight: 600;
  color: #f44336 !important;
} /* 未发布 - 红色 */
.status-unknown {
  font-weight: 600;
  color: #757575 !important;
} /* 未知状态 - 灰色 */
</style>